<script setup lang="ts">
import { PropsList } from '@/store/modules/layout';
import { useLayoutStore } from '@/store/modules/layout';
import separate from '@/assets/largescreen/zhankaishouqi-shugang.png';
import unfold from '@/assets/largescreen/zhankai-icon-lie.png';
import Collapse from '@/assets/largescreen/shouqi-icon-lie.png';

const { handoffHandle } = useLayoutStore();
const { leftHighlight, rightHighlight } = storeToRefs(useLayoutStore());
const flag = computed(() => {
  return leftHighlight.value === id || rightHighlight.value === id;
});
const { list, type, id } = defineProps<{
  list: PropsList;
  type: string;
  id: number;
}>();
</script>

<template>
  <div class="handoff">
    <img :src="separate" alt="" v-if="flag" />
    <div :class="['handoff-main', { 'active': flag }]" @click="handoffHandle(list.children, list.id, type)">
      <span>{{ list.title }}</span>
      <img class="status-box" :src="unfold" alt="" v-if="flag" />
      <img class="status-box" :src="Collapse" alt="" v-else />
    </div>
  </div>
</template>

<style scoped lang="scss">
.handoff {
  display: flex;
  align-items: center;
  justify-content: space-around;

  img {
    width: 12px;
    height: 30px;
  }

  .handoff-main {
    width: 5.875rem;
    height: 1.875rem;
    background: url(@/assets/largescreen/zhankai-lie.png) no-repeat center center;
    background-size: cover;
    margin-right: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    opacity: 0.6;
    cursor: pointer;

    .status-box {
      width: 8px;
      height: 8px;
    }
  }

  .active {
    opacity: 1;
    background: url(@/assets/largescreen/shouqi-lie.png) no-repeat center center;
    background-size: cover;
  }
}
</style>
